<template>
    <div>
        <div class="mc-common-title">
            <div class="mcct-left">
                <span></span>
                <span>品牌标</span>
            </div>
            <button
                    class="mcct-right"
                    @click="dialogVisible = true,qingchu()"
            >新增品牌标
            </button>
        </div>
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
        >
            <el-table-column
                    prop="id"
					type="index"
                    label="序号"
            >
            </el-table-column>
            <el-table-column
                    prop="pingpai_name"
                    label="品牌标名称"
            >
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="创建时间"
            >
            </el-table-column>
         
       
         
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
            >
                <template slot-scope="props">
                    <el-button
                            @click="updateEmplee = true,empleeId = props.row.id,ruleForm.name=props.row.pingpai_name"
                            type="text"
                            size="small"
                            :style="{color: '#C29C0F'}"
                    >编辑
                    </el-button>

                    <el-button
                            @click="opendelete(props.row.id)"
                            type="text"
                            size="small"
                            :style="{color: '#C29C0F'}"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="新增品牌标"
                :visible.sync="dialogVisible"
                width="460px"
                :close-on-click-modal="false"
        >
            <el-input
                    v-model="ruleForm.name"
                    placeholder="请填写品牌标！"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px'}"
            ></el-input>
         
         
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
                type="primary"
                @click="handleSubmit"
        >确 定</el-button>


      </span>
        </el-dialog>


    <!--编辑品牌标-->
        <el-dialog
                title="编辑品牌标"
                :visible.sync="updateEmplee"
                width="460px"
                :close-on-click-modal="false"				
        >
            <el-input
                    v-model="ruleForm.name"
                    placeholder="请填写品牌标！"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px'}"
            ></el-input>
        
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button @click="updateEmplee = false">取 消</el-button>
        <el-button
                type="primary"
                @click="update"
        >确 定</el-button>



      </span>
        </el-dialog>
      
	  
	  
	  
	  
	  <!--取消订单的弹框-->
	            <el-dialog
	                    title="提示"
	                    :visible.sync="dialogVisible3"
	                    width="30%"
	            >
	                <span>确定删除品牌标吗？</span>
	                <span slot="footer" class="dialog-footer">
	    <el-button @click="dialogVisible3 = false">取 消</el-button>
	    <el-button type="primary" @click="dialogVisible3 = false,deletestaff(ppbid)">确 定</el-button>
	  </span>
	            </el-dialog>
				
				
				
				
				
    </div>
</template>

<script>
    import {getAction, postAction} from '@/api/manage'

    export default {
        data() {
            return {
				ppbid:'',
				dialogVisible3:false,
                 token:localStorage.getItem("token"),
                 companyCode:'',
                 companyId:'',
                empleeId: '', // 员工ID
                url: {
                    list: "/company/getidentification",
                    add: "/company/addppb",
                    del: "/company/deleteppb",
                    detail: "/company/getstaffbyid",
                    update: "/company/updateppb",
                    queryCompanyCode:"/company/queryCompanyCode",
                     queryCompanyId:'/company/queryCompanyId'
                },
                dialogVisible: false,
                updateEmplee: false,
                currentIndex: 2,
                ruleForm: {
                    name: "",
                    num: "",
                    phone: "",
                    mendian: "",
                    accout: "",
                    pwd: "88888888",
                },
                tableData: [
                    {
                        // index: 1,
                        // num: "11256IU",
                        // name: "派定制01",
                        // mendian: "派定制01",
                        // phone: "0574-0886478",
                        // accout: "PDZ001",
                        // pwd: "123456",
                    },
                ],
            };
        },
        created() {
              
                    this.getData()
           
        },
        methods: {
			opendelete(id){
				this.ppbid=id;
				this.dialogVisible3=true;
			},
            // 添加的加载数据方法
            getData() {
                getAction(domain.publicUrl + this.url.list, {'token': this.token}).then(res => {
                    this.tableData = res.data.data
                })
            },

            //删除员工
            deletestaff(id) {
                getAction(domain.publicUrl + this.url.del, {'id': id}).then(res => {
                    if (res) {
                        this.$message.success("删除成功！")
                    } else {
                        this.$message.success("删除失败！")
                    }
                    this.getData()
                })
            },
           //编辑员工信息
            update() {
               
			   getAction(domain.publicUrl + this.url.queryCompanyId, {'token': this.token}).then(res => {
			     
			       this.companyId = res.data.data
			   
			      
			   })
			   
                getAction(domain.publicUrl + this.url.update, {
                    'id': this.empleeId,
                    'ppbname': this.ruleForm.name,
                   'companyId': this.companyId
                }).then(res => {
                             
                  let result = res.data;
                  if(result.code==0){
                   this.$message.success("修改成功！")
                       this.updateEmplee=false
                         this.getData()
                    }else{
                        this.$message.error(result.data);
                    }
                    this.getData()
                })

            },
              qingchu(){
              console.log("能不能进到清除方法里面来");
             this.ruleForm.name = "";
             
          },

            // 添加品牌标
            handleSubmit() {
                 getAction(domain.publicUrl + this.url.queryCompanyId, {'token': this.token}).then(res => {
                  
                    this.companyId = res.data.data
                       let params = {
                    companyId: this.companyId,
                    ppbname: this.ruleForm.name,
                   
                };
                // 发送请求
                getAction(domain.publicUrl + this.url.add, params).then(res => {
                    if (res.data.code == "0") {
                        this.$message.success("添加成功！")
                         this.dialogVisible=false
                         this.getData()
                    } else {
                        this.$message.error(res.data.data);
                    }
                    
                })
                })
             
                // 清空数据
                params.index = this.currentIndex;
                this.tableData.unshift(params);
                this.ruleForm.name = "";
                this.ruleForm.num = "";
                this.ruleForm.phone = "";
                this.ruleForm.accout = "";
                this.ruleForm.mendian = "";
                this.ruleForm.pwd = "";
                this.currentIndex++;
                this.dialogVisible = false;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .mc-common-title {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        margin-bottom: 20px;

        .mcct-left {
            display: flex;
            align-items: center;

            span:nth-child(1) {
                display: block;
                width: 5px;
                height: 25px;
                background: #4b4b4b;
            }

            span:nth-child(2) {
                font-size: 16px;
                font-weight: 500;
                color: #4e4e4e;
                margin-left: 15px;
            }
        }

        .mcct-right {
            width: 84px;
            height: 38px;
            background: #333333;
            border-radius: 3px;
            color: #f9d532;
            font-size: 14px;
            cursor: pointer;
        }
    }
</style>